<template>
  <div class="active_home phoneCSS">
    <ex-Header
      :left-options="{backText: '',preventGoBack:true}"
      title="活动"
      @on-click-back="goBack"
      use-pullup
      use-pulldown
    ></ex-Header>
      <!-- :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}" :pullup-config="{upContent:'上拉加载更多', downContent: '释放后加载'}"  -->
    <scroller
      lock-x
      scrollbar-y
      height="100vh"
      @on-pullup-loading="loadMore"
      @on-pulldown-loading="refresh"
      v-model="status"
      ref="scroller"
    >
      <div class="active_home_list">
        <div
          class="active_home_items"
          v-if="items"
          v-for="(item,index) in items"
          :key="index"
          @click="go(item)"
        >
          <div class="active_home_items_icon">
            <img v-if="item.image" :src="item.image">
          </div>
          <div class="active_home_items_title">开年活动</div>
          <div class="active_home_items_time">活动时间：{{item.date}}</div>
        </div>
      </div>
      <div
        slot="pullup"
        class="xs-plugin-pullup-container xs-plugin-pullup-up"
        style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;"
      >
        <span v-show="status.pullupStatus === 'default'"></span>
        <span
          class="pullup-arrow"
          v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'"
          :class="{'rotate': status.pullupStatus === 'up'}"
        >↑</span>
        <span v-show="status.pullupStatus === 'loading'">
          <spinner type="ios-small"></spinner>
        </span>
      </div>
    </scroller>

    <section class="empty" v-if="!items">
      <img :src="empty" alt="">
      <p>暂无活动</p>
    </section>

  </div>
</template>
<script>
import empty from "@/static/images/newYearActivities/emptyImg.png";
import store from "@/store/index.js";
import { Scroller, Spinner } from "vux";
import { mapGetters } from "vuex";
import exHeader from "@/components/xheader/index";
import { goBack, SetNav } from "@/utils/nav";
export default {
  name: "index",
  components: { exHeader, Scroller, Spinner },
  data() {
    return {
      pullupEnabled: true,
      empty:empty,
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      }
    };
  },
  created() {},
  mounted() {
    SetNav("index");
    this.getList()
  },
  computed: {
    ...mapGetters({
      items: "zodiacConfigs"
    })
  },
  methods: {
    getList(val){
      store.dispatch("operZodiacConfigs").then(res => {
        // if (type == "refresh") {
        //   this.list = rewards;
        //   this.$refs.scroller.donePulldown();
        // } else {
        //   this.list = this.list.concat(rewards);
        //   this.$refs.scroller.donePullup();
        //   if (rewards && rewards.length < this.pages.limit) {
        //     //禁用上拉刷新，在没有更多数据时执行
        //     this.$refs.scroller.disablePullup();
        //   }
        // }
      });
    },
    goBack() {
      goBack();
      //    var u = navigator.userAgent;
      // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
      // var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
      // var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
      // if (isiOS) {
      //     window.webkit.messageHandlers.goBack.postMessage("1");
      // }else{
      //   android.getEvaluatingJS("1")
      // }
    },
    go(item) {
      // if (item.status == 1) {
      //   this.$router.push({
      //     path: "/luckDraw",
      //     query: { sceneId: item.sceneId }
      //   });
      // } else {
      this.$router.push({
        path: "/",
        query: { activityId: item.activityId }
      });
      //}
    },
    getData() {},
    loadMore() {},
    refresh() {}
  }
};
</script>
<style lang="scss" scoped>
.active_home {
  background-color: whitesmoke;
  .active_home_list {
    padding: 0.4rem;
  }
  .active_home_items {
    background: rgba(255, 255, 255, 1);
    padding: 0.2rem;
    border-radius: 0.08rem;
    margin-bottom: 0.2667rem;
  }
  .active_home_items_icon {
    width: 8.8rem;
    height: 3.3333rem;
    background-color: crimson;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .active_home_items_title {
    font-size: 0.3467rem;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin: 0.2667rem 0;
  }
  .active_home_items_time {
    font-size: 0.2933rem;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
  }
  .empty{
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate3d(-50%,-50%,0);
    img{
      width: 4.1867rem;
    }
    p{
      margin-top: 0.8533rem;
      font-size: 0.3733rem;
      color: #ccc;
    }
  }
}
</style>
